<template>
    <div>


        <div class="slba-container">
            <div class="slba-header">
                <div class="tj">

                    <div class="rili tj-left">
                        <div>

                            <span class="rili-start" @click="showStart = true">
                                {{ getDate(startDate) }}

                            </span>
                            至
                            <span class="rili-end" @click="showEnd = true">
                                {{ getDate(endDate) }}
                            </span>
                        </div>

                        <span class="rili-img">
                            <van-icon :name="riliIcon" />
                        </span>
                    </div>
                    <div class="tj-right">
                        <van-search left-icon="" shape="round" background="none" v-model="tiaojian" right-icon="search"
                            placeholder="请输入搜索关键词" @click-right-icon="onSearch" />
                    </div>

                </div>

                <div style="margin-top: 12px;">
                    <div class="list-container-title">
                        <div class="column column-2 text-align-center">
                            <span class="font-size-10">
                                流水号
                            </span>
                        </div>
                        <div class="column column-2 text-align-center">
                            <span class="font-size-10">
                                类型
                            </span>
                        </div>
                        <div class="column column-2 text-align-center">
                            <span class="font-size-10">
                                作物
                            </span>
                        </div>
                        <!-- <div class="column column-2 text-align-center">
                            <span class="font-size-10">
                                品种
                            </span>
                        </div> -->
                        <div class="column column-2 text-align-center">
                            <span class="font-size-10">
                                备案单位
                            </span>
                        </div>
                        <div class="column column-2 text-align-center">
                            <span class="font-size-10">
                                统一社会信用代码
                            </span>
                        </div>
                        <div class="column column-2 text-align-center">
                            <span class="font-size-10">
                                许可证
                            </span>
                        </div>
                        <div class="column column-2 text-align-center">
                            <span class="font-size-10">
                                日期
                            </span>
                        </div>
                    </div>
                </div>

            </div>

            <div class="slba-content">
                <van-pull-refresh v-model="loading" @refresh="onRefresh">
                    <van-list :loading="loading" :finished="finished" finished-text="已经到底了" class="c-dab-list"
                        @load="onLoad">

                        <div v-for="(item, index) in tableData" :key="index" class="list-container  text-align-right">
                            <div class="column column-2 text-align-left">
                                {{ item.FilingNumber }}
                            </div>
                            <div class="column column-2 text-align-left">
                                {{ item.ManageFilingStatus }}
                            </div>
                            <div class="column column-2 text-align-left">
                                {{ item.CropID }}
                            </div>
                            <!-- <div class="column column-2 text-align-left">
                                {{ item.VarietyName }}
                            </div> -->
                            <div class="column column-2 text-align-left">
                                {{ item.BranchesName }}
                            </div>
                            <div class="column column-2 text-align-left">
                                {{ item.BranchesCode }}
                            </div>
                            <div class="column column-2 text-align-left">
                                {{ item.LicenceNO }}
                            </div>
                            <div class="column column-2 text-align-left">
                                {{ getShowDate(item.AuditingDate) }}
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
        </div>

        <van-calendar v-model:show="showStart" :default-date="startDate" switch-mode="year-month"
            @confirm="onStartConfirm" />

        <van-calendar v-model:show="showEnd" :default-date="endDate" switch-mode="year-month" @confirm="onEndConfirm" />
    </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick, onBeforeUnmount, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import uiUtil from "@/util/UiUtil.js";
import riliIcon from "@/assets/img/rili.png";
const tableData = ref([]);
const router = useRouter();
const route = useRoute();
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const showStart = ref(false);
const showEnd = ref(false);
const startDate = ref({});
const endDate = ref({});
const tiaojian = ref('');
const type = ref({})
endDate.value = new Date();
const currentDate = new Date();
currentDate.setMonth(currentDate.getMonth() - 3);
startDate.value = currentDate
let user = JSON.parse(localStorage.getItem(uiUtil.urlPath.keys.user))
function getDate(date) {
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从 0 开始
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
}
function onEndConfirm(date) {
    showEnd.value = false
    endDate.value = date
    props.dataValue.EndDate = getDate(date)
    onRefresh()
}
function onStartConfirm(date) {
    showStart.value = false
    startDate.value = date
    props.dataValue.StartDate = getDate(date)
    onRefresh()
}
function onSearch() {

    onRefresh()
}
const props = defineProps({
    dataValue: {
        type: Object,
        default: {}
    },
});

watch(() => props.dataValue, (newShow) => {
    init();
});
onMounted(() => {
    init();
})
const init = () => {
    // console.log(props.dataValue);

    if (props.dataValue.StartDate) {
        // console.log('dataValue.StartDate', props.dataValue.StartDate);
        startDate.value = new Date(props.dataValue.StartDate)
    }
    if (props.dataValue.EndDate) {
        // console.log('dataValue.EndDate', props.dataValue.EndDate);
        endDate.value = new Date(props.dataValue.EndDate)
    }
    getData()
}

const onRefresh = () => {
    page = 1
    getData()
}
const getData = async () => {
    getDataList()
};
const onLoad = async () => {
    page = page + 1
    getData()
};
let page = 1
let size = 20
const getDataList = async () => {

    const params = {
        CropID: tiaojian.value,
        IsZJY: '',
        page: page,
        size: size,
        RegionID: props.dataValue.RegionID || user.RegManageRegionID,
        StartDate: getDate(startDate.value),
        EndDate: getDate(endDate.value),
    }
    uiUtil.http().getObj({
        url: uiUtil.urlPath.getAppCropStatisticsList,
        data: params,
        start: () => {
            uiUtil.toastLoading()
            if (refreshing.value) {
                refreshing.value = false;
            }
        },
        succeed: (res) => {
            // loading.value = false;
            // debugger
            // console.log('1ucceed=', res)
            if (!res || !res.code || 200 != res.code) {
                uiUtil.toastFail(res.msg)
                return
            }
            if (!res.data || !res.data.resultData) {
                // 如果返回数据为空，表示已加载完成
                finished.value = true;
                uiUtil.toastClose()
                return;
            }
            
            if (res.data.resultData.length > 0) {
                if (res.data.current == 1) {
                    tableData.value = res.data.resultData
                } else {
                    tableData.value.push(...res.data.resultData)
                }
            } else if (res.data.current == 1){
                tableData.value = []
            }
            uiUtil.toastClose()

        },
        failed: (res) => {
            // debugger
            console.log('failed=', res)
            // showFailToast('添加失败')
            uiUtil.toastFail('添加失败')
        },
        finish: () => {
            uiUtil.toastClose()
            loading.value = false;
        }
    })
};

onBeforeUnmount(() => {
    // console.log('onUnmounted', route);
    if (route.path == uiUtil.routerPath.main) {
        props.dataValue.StartDate = null
        props.dataValue.EndDate = null
    }
})
function getShowDate(date) {
    if (date && date.length > 10) {
        return date.slice(0, 10)
    }
    return date
}
</script>

<style scoped>
.slba-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.slba-header,
.slba-footer {
    flex: 0 0 auto;
    text-align: center;
    padding: 0;
    overflow: auto;
    margin: 0 12px;
}

.slba-content {
    flex: 1 1 auto;
    overflow-y: auto;
    margin: 0 12px;
}

.c-dab-list {
    padding-bottom: 200px;
}

.list-container-title {
    display: flex;
    background-color: #F9F9F9;
    text-align: center;
    align-items: center;
    color: #888;
    min-height: 50px;
    font-size: 10px;
    padding: 0 12px;
}

.font-size-10 {
    font-size: 10px;
}

.list-container {
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #ededed;
    padding: 3px 12px;
    min-height: 50px;
}

.column {
    padding: 0 2px;
    word-break: break-all;
    word-wrap: break-word;
}

.column-1 {
    width: 50px;
}

.text-align-center {
    text-align: center
}

.column-5 {
    width: 50px;
}

.column-2,
.column-3,
.column-4 {
    flex: 1;
}

.text-align-left {
    text-align: left
}

.text-align-right {
    text-align: right
}

.tj {
    display: inline;
    display: flex;
}

.tj-left {
    margin-top: 12px;
}

.tj-right {
    margin-top: 2px;
    flex: 1;
    height: 35px;
    --van-search-content-background: #fff;
}

.tj-right-input {
    background: none;
    width: 100px;
}

.rili {
    background-color: #fff;
    height: 35px;
    border-radius: 34px;
    display: flex;
    align-items: center;
    /* 左右内容间的空间自动分配 */
    color: #888;
    font-size: 13px;
}

.rili-start {
    margin: 0 0 0 10px;
    font-size: 13px;
}

.rili-end {
    margin: 0 5px 0 0;
    font-size: 13px;
}

.rili-img {
    margin: 0 12px 0 12px;
    font-size: 13px;

}
</style>